<template>
  <div>
    <div v-if="showButton">
      <Button type="text" style="color: #2d8cf0" @click="openUploadModal"
        >上传附件</Button
      >
      <!-- <small style="color: #ccc">支持扩展名：.doc .docx .pdf</small> -->
    </div>

    <Modal
      v-model="dialogVisible"
      title="附件"
      width="1000px"
      scrollable
      footer-hide
    >
      <!-- <div v-if="!view||noTemplate">
        <p v-for="(item, index) in templateList" :key="index">
          {{ item.fileName
          }}<a :href="item.url" class="download-style">模板下载</a>
        </p>
        <span class="dot-line"></span>
      </div> -->
      <div style="width: 50%" v-if="!view">
        <upload 
          @uploadSuccess="uploadSuccess"
          :imgLists="imgLists"
          :format="format"
          ref="uploadModal"
          v-bind="$attrs"
        />
      </div>
      <div v-if="view">
        <statusList
          :loading="false"
          :tableColumns="attachListColumn"
          :tableData="imgLists"
        />
      </div>
      <slot name="footer">
        <div class="justify-end">
          <Button
            @click="hanleCancel"
            style="margin-right: 10px"
            >取消</Button
          >
          <Button type="primary" 
            @click="hanleSave"
            >确定</Button
          >
        </div>
      </slot>
    </Modal>
  </div>
</template>

<script>
export default {
  props: {
    uploadModalVisible: {
      type: Boolean,
      default: false
    },
    showButton: {
      type: Boolean,
      default: true
    },
    view: {
      type: Boolean,
      default: false
    },
    imgLists: {
      type: Array,
      default: ()=>{return []}
    },
    noTemplate: {
      type: Boolean,
      default: false
    },
    format: {
      type: Array,
      default: ()=>{return ['png', 'jpg', 'jpeg', 'pdf', 'doc', 'docx', 'xlsx', 'xls']}
    }
  },
  data() {
    return {
      attachments: [],
      deleteIds: "",
      dialogVisible: false,
      loading: false,
      templateList: [
        {
          fileName: "湖南xxxx.pdf",
          url: "/test.xls"
        }
      ],
      attachListColumn: {
        maxHeight: 300,
        columns: [
          {
            title: "流程阶段",
            key: "orgName",
            align: "center",
            tooltip: true
          },
          {
            title: "附件名",
            key: "infoNo",
            align: "center",
            tooltip: true,
            render: (h, params) => {
              return (
                <div class="action-flex">
                  <a
                    style={{
                      color: "##2d8cf0"
                    }}
                    onClick={(a, b) => {
                      this.openEditModal(params.row.infoDeclarId);
                    }}
                  >
                    {params.row.infoNo}
                  </a>
                </div>
              );
            }
          },
          {
            title: "附件类型",
            key: "custName",
            align: "center",
            tooltip: true
          },
          {
            title: "上传人",
            key: "custName",
            align: "center",
            tooltip: true
          },
          {
            title: "上传时间",
            key: "custAddr",
            align: "center",
            tooltip: true
          }
        ]
      },
      attachListData: [
        {
          infoNo: "011"
        }
      ],
      uploadFlag: false
    };
  },
  computed: {},
  created() {
    console.log(this.view,"view")
  },
  mounted() {},
  watch: {},
  methods: {
    hanleSave() {
      if(this.uploadFlag) {
        return this.$Message.warning("正在上传中，请稍后操作")
      }
      this.dialogVisible = false
      this.$emit("uploadSuccess",this.attachments,this.deleteIds)
    },
    hanleCancel() {
      this.attachments = []
      this.deleteIds = ""
      this.dialogVisible = false
    },
    openUploadModal() {
      this.dialogVisible = true;
    },
    uploading(val) {
      this.uploadFlag = val
    },
    uploadSuccess(data, deleteIds) {
      this.attachments = data
      this.deleteIds = deleteIds
      // this.$emit("uploadSuccess",data,deleteIds)
    }
  },
  components: {
    upload: () => import("@/components/upload"),
    statusList: () => import("./statusList")
  }
};
</script>

<style scoped lang="scss">
.download-style {
  display: inline-block;
  margin-left: 20px;
}
.dot-line {
  display: inline-block;
  width: 100%;
  border-bottom: 1px dotted #777;
}
</style>
